<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>手风琴例子</title>
	<script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
	<div id="accordion" class="easyui-accordion" style="width:500px;height:300px;">
		<div title='栏目一'>
			<h3 style="color:#0099FF;">Accordion for jQuery</h3>
			<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
		</div>
		<div title="保存" data-options="iconCls:'icon-save'">
			内容
		</div>
		<div title="加载" titleDirection='up' data-options="iconCls:''">
			内容
		</div>

		<div title="Ajax" data-options="href:'[这里写路径]'" style="padding:10px">
		</div>
		
		<div title="DataGrid" style="padding:10px" data-options="
				selected:true,
				tools:[{
					iconCls:'icon-reload',
					handler:function(){
						$.messager.tip({msg:'重新加载数据',icon:'info'});
						$('#dg').datagrid('reload');
					}
				}]">
			<table id="dg" class="easyui-datagrid" 
				data-options="url:'datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">
				<thead>
					<tr>
						<th data-options="field:'itemid',width:80">Item ID</th>
						<th data-options="field:'productid',width:100">Product ID</th>
						<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
						<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
						<th data-options="field:'attr1',width:150">Attribute</th>
						<th data-options="field:'status',width:50,align:'center'">Status</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	
	<div class='easyui-linkbutton' onclick='javascript:$("#accordion").accordion("select",1);'>展开第二个panel</div>
	<div class='easyui-linkbutton' onclick='javascript:$("#accordion").accordion("unselect",1);'>折叠第二个panel</div>
	<div class='easyui-linkbutton' onclick='javascript:$("#accordion").accordion("remove",1);'>移除第二个panel</div>
	<script>
	 !function(){
		 let container=$('#accordion')
			 .accordion({
				animate:true,/* 启用动画,若多次设置特效会出现异常 */
				width:500,
				height:300,
				fit:false,/* true:此容器将fill父容器中 */
				border:true,/* 显示外围边框 */
				multiple:true,/* 可展开多个 */
				selected:0,
				halign:'top'/* 'top','left','right' */
			 });
	 }();
	</script>
</body>
</html>